<template>
<div>
  <el-breadcrumb separator-class="el-icon-arrow-right" style="font-size: 16px">
    <el-breadcrumb-item :to="{ path: '/' }">后台管理</el-breadcrumb-item>
    <el-breadcrumb-item :to="{ path: '/sys-admin/user/list'}">用户列表</el-breadcrumb-item>
    <el-breadcrumb-item>用户详情</el-breadcrumb-item>
  </el-breadcrumb>
  <el-divider></el-divider>

  <el-descriptions title="用户详细信息" direction="vertical" :column="4" border>
    <el-descriptions-item label="头像">
      <div class="demo-image">
        <div class="block">
          <span class="demonstration"></span>
          <el-image
              style="width: 60px; height: 60px"
              :src="this.avatar"></el-image>
        </div>
      </div>
    </el-descriptions-item>
    <el-descriptions-item label="用户名">{{username}}</el-descriptions-item>
    <el-descriptions-item label="昵称">{{nickname}}</el-descriptions-item>
    <el-descriptions-item label="实名">{{name}}</el-descriptions-item>
    <el-descriptions-item label="角色">{{role}}</el-descriptions-item>
    <el-descriptions-item label="性别">{{sex}}</el-descriptions-item>
    <el-descriptions-item label="学校">{{school}}</el-descriptions-item>
    <el-descriptions-item label="学号">{{sno}}</el-descriptions-item>
    <el-descriptions-item label="班级">{{classname}}</el-descriptions-item>
    <el-descriptions-item label="手机号">{{phone}}</el-descriptions-item>
    <el-descriptions-item label="用户创建时间">{{createData}}</el-descriptions-item>
  </el-descriptions>

</div>
</template>


<script>
export default {
  name: "UserDetailsView",
  data() {
    return {
      avatar:'',
      username:'',
      nickname:'',
      name:'',
      role:'',
      sex:'',
      school:'',
      sno:'',
      classname:'',
      phone:'',
      createData:''
    }
  },
  methods:{
    showUserDetails(){
      let userId = localStorage.getItem('userId');
      console.log('在localStorage中的JWT数据：' + localStorage.getItem('jwt'));
      let url = 'http://localhost:9080/users/'+userId+'/details';
      this.axios
          .create({'headers': {'Authorization': localStorage.getItem('jwt')}})
          .get(url).then((response) => {
        console.log(response.data.data);
        let userDetails = response.data.data;
        this.avatar=userDetails.avatar;
        this.username=userDetails.username;
        this.nickname=userDetails.nickname;
        this.name=userDetails.name;
        this.role=userDetails.role;
        if(userDetails.sex==0){
          this.sex='女';
        }else {
          this.sex='男';
        }
        this.school=userDetails.school;
        this.sno=userDetails.sno;
        this.classname=userDetails.classname;
        this.phone=userDetails.phone;
        this.createData=userDetails.createData;
      })
    }
  },
  mounted() {
    this.showUserDetails();
  }
}
</script>

<style scoped>

</style>
